<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html>

<head>
    <title>商品修改</title>
    <link rel="stylesheet" href="../../../backstage/css/x-admin.css" media="all">
    <script src="../../../backstage/js/jquery.min.js"></script>
    <script src="../../../backstage/lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../../backstage/js/x-layui.js" charset="utf-8"></script>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>商品管理</cite></a>
        <a><cite>修改商品</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <form class="layui-form layui-form-pane" action="" id="edit_product">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <input type="hidden" name="id" value="{$art.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>商品类别</label>
                        <div class="layui-input-block">
                            <input id="type" type="text" name="title"  autocomplete="off" value="" class="layui-input-add" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>商品名称</label>
                        <div class="layui-input-block">
                            <input id="itemName" type="text" name="title" autocomplete="off" value="" class="layui-input-add" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>生效对象</label>
                        <div class="layui-input-block">
                            <input id="subject" type="text" name="subject" required="" value="" lay-verify="required" autocomplete="off" class="layui-input-add" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>何时生效</label>
                        <div class="layui-input-block">
                            <input id="whenEffect" type="text" name="whenEffect" value="" required="" lay-verify="required" autocomplete="off" class="layui-input-add"  maxlength="10">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>生效时长(天)</label>
                        <div class="layui-input-block">
                            <input id="howLong" type="number" name="howLong" value="" required="" lay-verify="required" autocomplete="off" class="layui-input-add"
                                   oninput = "if(value>99999)value=99999;value=value.replace(/[^\d]/g,'')"  >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>价格(元)</label>
                        <div class="layui-input-block">
                            <input id="price" type="number" name="price" value=""  required="" lay-verify="required" autocomplete="off" class="layui-input-add"
                                   oninput = "if(value>99999)value=99999;value=value.replace(/[^\d]/g,'')">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>状态</label>
                        <div class="layui-input-block">
                            <input id="defaultState" type="text" name="price" value=""  required="" lay-verify="required" autocomplete="off" class="layui-input-add" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>修改状态</label>
                        <div class="layui-input-inline" id="state" >
                            <input type="radio"  name="state" value="有效" title="有效"  checked/>
                            <input type="radio"  name="state" value="无效" title="无效" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>积分</label>
                        <div class="layui-input-block">
                            <input id="credit" type="number" name="credit" value=""  required="" lay-verify="required" autocomplete="off" class="layui-input-add"
                                   oninput = "if(value>99999)value=99999;value=value.replace(/[^\d]/g,'')">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>描述</label>
                        <div class="layui-input-block">
                            <textarea id="description"  name="description"  required=""
                                   class="layui-input-add" maxlength="100" style="height:200px;">
                                <%--<s:property value="description"/>--%>
                                </textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>使用说明</label>
                        <div class="layui-input-block">
                            <input id="howUse" type="text" name="howUse" value="" required="" lay-verify="required" autocomplete="off" class="layui-input-add" maxlength="30">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>备注</label>
                        <div class="layui-input-block">
                            <input id="remark" type="text" name="remark" value="" autocomplete="off" class="layui-input-add" maxlength="30">
                        </div>
                    </div>
                    <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>缩略图
                    </label>
                    <div class="layui-input-inline" >
                        <div class="site-demo-upbar">
                            <div class=" layui-upload-button" style="border:#FFFFFF ;">
                                <button type="button" class="layui-btn" id="test1">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <input class="layui-upload" type="file" accept="undefined" id="previewImg"
                                       onchange="upload(this.files)">
                                <%--从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，
                                只需要在<input type="file">里添加multiple或multiple="multiple"属性。--%>
                                <%--</div>--%>
                            </div>
                        </div>
                        <div class="layui-input-inline" id="img">
                            <img src="#" id="img3" name="img3" style="width:400px;height:200px;"  />
                        </div>
                    </div>
                </div>

                    <script>
                        function getobj(obj) {
                            return document.getElementById(obj);
                        }
                        var f=$("#previewImg")[0].files[0];
                        if(document.getElementById('previewImg')){

                            function upload(f) {
                                var str = "";
                                for (var i = 0; i < f.length; i++) {
                                    var reader = new FileReader();
                                    reader.readAsDataURL(f[i]);
                                    reader.onload = function (e) {
                                        str += '<img src="' + e.target.result + '" id="img3" width="130px" height="130px"/>';
                                        getobj("img").innerHTML = str;
                                    }
                                }
                            }
                        }
                    </script>

                    <div class="layui-form-item">
                        <input id="edit" type="button" class="layui-btn"  lay-submit="edit" value="编辑">  </input>
                    </div>
                    <div style="height:100px;"></div>
                </div>
            </div>
            </div>
        </form>
</div>

<script>
layui.use(['laydate', 'element', 'layer', 'form'], function() {
    $ = layui.jquery;   //jquery
    laydate = layui.laydate;    //日期插件
    lement = layui.element();   //面包导航
    layer = layui.layer;    //弹出层
    var form = layui.form();

    var start = {
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas; //将结束日的初始值设定为开始日
        }
    };

    $(document).ready(function(){
        //获取传递过来的localStorage
        var id = window.localStorage.getItem('msg');
        console.log(id);
        $.ajax({
            type: 'POST',
            url: '/item/selectById',
            dataType: "json",
            data: {itemId: id},
            error: function () {
                console.log("失败");
            },
            success: function (result) {

                console.log(result);
                $("#type").val(result.item.type);
                $("#itemName").val(result.item.itemName);
                $("#defaultState").val(result.item.state);
                $("#subject").val(result.item.subject);
                $("#howLong").val(result.item.howLong);
                $("#whenEffect").val(result.item.whenEffect);
                $("#price").val(result.item.price);
                $("#credit").val(result.item.credit);
                $("#remark").val(result.item.remark);
                $("#description").val(result.item.description);
                $("#howUse").val(result.item.howUse);

//自定义验证规则

                form.verify({
                    howLong: function(value){
                        if(value.length<=0){
                            return '使用时长不能为空';
                        }
                    }
                });
                form.verify({
                    whenEffect: function(value){
                        if(value.length<=0){
                            return '何时生效不能为空';
                        }
                    }
                });
                form.verify({
                    price: function(value){
                        if(value.length<=0){
                            return '价格不能为空';
                        }
                    }
                });
                form.verify({
                    credit: function(value){
                        if(value.length<=0){
                            return '积分不能为空';
                        }
                    }
                });
                form.verify({
                    description: function(value){
                        if(value.length<=0){
                            return '描述不能为空';
                        }
                    }
                });
                form.verify({
                    howUse: function(value){
                        if(value.length<=0){
                            return '如何使用不能为空';
                        }
                    }
                });

                $("#edit").click(function () {

                    var type = $.trim($("#type") .val());//所属商品类型
                    var itemName = $.trim($("#itemName").val());
                    var state= $.trim($('#state input:checked').val());
                    var subject = $.trim($("#subject").val());
                    var howLong = $.trim($("#howLong").val());
                    var whenEffect= $.trim($("#whenEffect").val());
                    var price = $.trim($("#price").val());
                    var credit = $.trim($("#credit").val());
                    var remark = $.trim($("#remark").val());
                    var description = $.trim($("#description").val());
                    var howUse = $.trim($("#howUse").val());

                    var s = $('#previewImg')[0].files[0];
                    var formData = new FormData();
                    // 服务端要求参数
                    formData.append("id",id);
                    formData.append("file", s);
                    formData.append("type",type);
                    formData.append("subject",subject);
                    formData.append("itemName",itemName);
                    formData.append("state",state);
                    formData.append("howLong",howLong);
                    formData.append("price",price);
                    formData.append("credit",credit);
                    formData.append("remark",remark);
                    formData.append("description",description);
                    formData.append("whenEffect",whenEffect);
                    formData.append("howUse",howUse);

                    console.log(formData.get('itemName'));
                    console.log(formData.get('file'));
                    //图片

//                    if (!$("#previewImg").val().match(/.jpg|.JPG|.png|.bmp|.jpeg/i)) {　　//判断所选文件格式
//                        return alert("上传的图片格式不正确，请重新选择");
//                    }

                    if (howLong==""){
                        layer.msg('使用时长不能为空',{icon:5,time:2000});
                        return false;
                    }
                    if (whenEffect==""){
                        layer.msg('何时生效不能为空',{icon:5,time:2000});
                        return false;
                    }
                    if (price==""){
                        layer.msg('价格不能为空',{icon:5,time:2000});
                        return false;
                    }
                    if (credit==""){
                        layer.msg('积分不能为空',{icon:5,time:2000});
                        return false;
                    }
                    if (description==""){
                        layer.msg('描述不能为空',{icon:5,time:2000});
                        return false;
                    }
                    if (howUse==""){
                        layer.msg('使用方式不能为空',{icon:5,time:2000});
                        return false;
                    }
                    $.ajax({
                        type:'POST',
                        url:'/item/update',
                        data:formData,
                        dataType:"JSON",
                        //cache: false,      //cache设置为false，上传文件不需要缓存。
                        processData: false,     //processData设置为false。因为data值是FormData对 象，不需要对数据做处理
                        contentType: false,
                        error: function () {
                            alert("失败");
                        },
                        success:function(data){
                            console.log(data);
                            if(data.msg=="修改成功"){
                                alert("修改成功");
                            }else if(data.msg=="修改失败"){
                                alert("修改失败");
                            }else if(data.msg=="文件格式不正确，仅支持.jpg/.jpeg/.png格式上传"){
                                alert("文件格式不正确，仅支持.jpg/.jpeg/.png格式上传");
                            }
                            location.reload();
                        }
                    });
                });
            }
        });
    });
});
</script>
</body>

</html>